<template>
  <!--查询框-->
  <div>
    <el-row>
      <el-col :span=2>
        <el-tag>档案编号</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_id'></el-input>
      </el-col>
      <el-col :span=2>
        <el-tag>姓名</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_name'></el-input>
      </el-col>
      <el-col :span=2>
        <el-tag>身份证号</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_idNumber'></el-input>
      </el-col>
      <el-col :span=2>
        <el-tag>银行卡号</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_creditCardNumber'></el-input>
      </el-col>
      <el-col :span=3>
        <el-button type="primary" @click="queryRecords">查询</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- 信息表格-->
    <el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%" border>
      <el-table-column prop="id" label="编号" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="idNumber" label="身份证号"></el-table-column>
      <el-table-column prop="creditCardNumbers" label="银行卡号"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small"  @click="look(scope.row)" >查看</el-button>
        <el-button type="danger" size="small" @click="cancelled(scope.$index)">注销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount">
      </el-pagination>

      <!--注销原因-->
      <el-dialog title="请输入注销原因" :visible="Visible" :before-close="handleClose">
        <el-row>
          <el-col :span=4>
            <el-input v-model="reason"></el-input>
          </el-col>
          <el-col :span=4>
            <el-button type="primary" @click="reject(reject_col)">确定</el-button>
          </el-col>
        </el-row>
      </el-dialog>

      <!-- 弹窗 -->
      <el-dialog :visible.sync="dialogVisible" width="70%">
        <div class="dialog-style">
          <h3>档案详情</h3>
          <el-divider></el-divider>
          <el-table
            :data="formData"
            stripe
            v-loading="loading"
            style="width:900px;left:6%;">
            <el-table-column prop="id" label="档案号" width="300px" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="300px" align="center"></el-table-column>
            <el-table-column prop="nation" label="民族" width="299px" align="center"></el-table-column>
          </el-table>
          <el-table
            :data="formData"
            stripe
            style="width:900px;left:6%;">
            <el-table-column prop="gender" label="性别" width="300px" align="center"></el-table-column>
            <el-table-column prop="politicsStatusStr" label="政治面貌" width="300px" align="center"></el-table-column>
            <el-table-column prop="idNumber" label="身份证号" width="299px" align="center"></el-table-column>
          </el-table>
          <el-table
            :data="formData"
            stripe
            style="width:900px;left:6%;">
            <el-table-column prop="birthday" label="出生日期" width="300px" align="center"></el-table-column>
            <el-table-column prop="age" label="年龄" width="300px" align="center"></el-table-column>
            <el-table-column prop="healthStatusStr" label="健康状况" width="299px" align="center"></el-table-column>
          </el-table>
          <el-table
            :data="formData"
            stripe
            style="width:900px;left:6%;">
            <el-table-column prop="workStatusStr" label="是否在岗" width="300px" align="center"></el-table-column>
            <el-table-column prop="salary" label="年收入" width="299px" align="center"></el-table-column>
            <el-table-column prop="livingSpace" label="住房面积" width="300px" align="center"></el-table-column>
          </el-table>
          <el-table
            :data="formData"
            stripe
            style="width:900px;left:6%;">
            <el-table-column prop="phoneNumber" label="电话" width="300px" align="center"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="299px" align="center"></el-table-column>
            <el-table-column prop="maritalStatusStr" label="婚姻状况" width="300px" align="center"></el-table-column>
          </el-table>
          <el-table
            :data="formData"
            stripe
            style="width:900px;left:6%;">
            <el-table-column prop="insuranceStatusStr" label="医保" width="300px" align="center"></el-table-column>
            <el-table-column prop="postcode" label="邮编" width="299px" align="center"></el-table-column>
            <el-table-column prop="workUnit" label="所属单位" width="300px" align="center"></el-table-column>
          </el-table>
          <el-table
            :data="formData"
            stripe
            style="width:900px;left:6%;">
            <el-table-column prop="creditCardNumbers" label="银行卡号" width="300px" align="center"></el-table-column>
            <el-table-column prop="wid" label="职工号" width="299px" align="center"></el-table-column>
          </el-table>
          <el-button type="primary"><a :href="fileLink">下载附件</a></el-button>
          <!--弹窗关闭 -->
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeView">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import instance from "../../../utils/request";

export default {
  name: "index",
  data() {
    return {
      Visible: false,
      reject_col: 0,
      reason: '',
      para_id: '',
      para_idNumber: '',
      para_creditCardNumber: '',
      para_name: '',
      tableData: [],
      formData:[],
      currentPage: 1,                         // 默认显示第几页
      totalCount: 0,                          // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pageSizes: [1, 2, 3, 4, 5, 6],          // 个数选择器（可修改）
      PageSize: 6,                            // 默认每页显示的条数（可修改）
    }
  },
  methods: {
    //弹窗关闭
    closeView() {
      this.dialogVisible=false;
      this.formData=[];
    },

    //查看
    look(row){
      this.formData=[];
      let id=row.id;
      //console.log(row);
      let _this = this;
      //向后端发送修改请求
      instance.post('/api/adminRecord/previewRecord',{
        id:id,
      }).then(function (res) {
        if(res.data.code === 200) {
          //alert('操作成功！');
          _this.formData.push(res.data.data);
          _this.getRecord();
          _this.fileLink=res.data.data.attachFile;
          console.log('更新成功');
          _this.loading=false;
        }
      }).catch(function (err) {
        console.log(err);
      });
      _this.getRecord();
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm('确定关闭？').then(_ => {
        this.Visible = false;
      }).catch(_ => {
      });
    },
    cancelled(i) {
      this.Visible = true;
      this.reject_col = i;
    },

    //注销
    reject(i) {
      let _this = this;
      instance.post('/api/adminRecord/cancel', {
        id: _this.tableData[i].id,
        name: _this.tableData[i].name,
        idNumber: _this.tableData[i].idNumber,
        creditCardNumbers: _this.tableData[i].creditCardNumbers,
        status: _this.tableData[i].status,
        workerId: _this.tableData[i].workerId,
        stuckReason:_this.tableData[i].stuckReason
      }).then(function (res) {
        if (res.data.code === 200) {
          alert('操作成功！');
          _this.Visible = false;
          instance.post('/api/adminRecord/cancelConfirm', {
            workerId: _this.tableData[i].workerId,
            reason: _this.reason
          }).then(function (res) {
            if (res.data.code === 200) {
              console.log(res.data);
            }
          }).catch(function (err) {
            console.log(err);
          });
        } else {
          alert('error');
        }
        _this.getRecord();
      }).catch(function (err) {
        console.log(err);
      });
      _this.getRecord();

    },

    // 分页
// 每页显示的条数
    handleSizeChange(val) {
// 改变每页显示的条数
      this.PageSize = val
// 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
    },
// 显示第几页
    handleCurrentChange(val) {
// 改变默认的页数
      this.currentPage = val
    },
    queryRecords() {
      let queryStr;
      let para_id, para_name, para_idNumber, para_creditCardNumber;
      para_id = (this.para_id === '') ? '' : ('sId=' + this.para_id);
      para_name = (this.para_name === '') ? '' : ('sName=' + this.para_name);
      para_idNumber = (this.para_idNumber === '') ? '' : ('sIdNumber=' + this.para_idNumber);
      para_creditCardNumber = (this.para_creditCardNumber === '') ? '' : ('sCreditCardNumbers=' + this.para_creditCardNumber);
      if (this.para_id === '' && this.para_name === '' && this.para_idNumber === '' && this.para_creditCardNumber === '') {
        queryStr = '';
      } else {
        queryStr = '?' + para_id + '&' + para_name + '&' + para_idNumber + '&' + para_creditCardNumber;
      }
      //获取所有不合格档案
      let _this = this;
      let url = '/api/adminRecord/searchByRejected';
      instance.get(url + queryStr).then(function (res) {
        if (res.data.code === 200) {
          _this.tableData = res.data.data;
          _this.totalCount = _this.tableData.length;
        } else {
          alert('查询出错啦，请重试');
        }
      }).catch(function (err) {
        console.log(err);
      })
    },
    //重新查询当前页面数据
    getRecord() {
      let _this = this;
      instance.get('/api/adminRecord/searchByRejected').then(function (res) {
        if (res.data.code === 200) {
          _this.tableData = res.data.data;
          _this.totalCount = _this.tableData.length;
          console.log(_this.tableData);
        } else {
          if (res.data.code === 218) {
            alert('暂无数据');
          }
          _this.tableData = [];
        }
      });
    }

  },
  created() {
    this.getRecord();
  }
}
</script>

<style scoped>

</style>

